<section class="listSection">
  <div class="listNav">
    权限管理>部门列表
  </div>

  <section class="content selectContent">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>查询条件</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect" >
        <form #departmentList="ngForm" (ngSubmit)="listMessage(departmentList.value)"  class="form-inline" >
          <div class="row">
            <div class="form-group search-list">
              <label>部门名称：</label>
              <input [(ngModel)]="departmentName" name="departmentName" type="text" class="form-control" placeholder="请输入部门名">
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn"  type="submit">查询</button>
            </div>
          </div>
          <div class="row">
            <div class="form-group search-list">
              <label>部门状态：</label>
              <select [(ngModel)]="departmentStatus" name="departmentStatus" class="form-control selectStyle">
                <option value="">请选择部门状态</option>
                <option value="0">启用</option>
                <option value="1">停用</option>
              </select>
            </div>
            <div class="form-group search-list search-list-btn ">
              <button class="btn selectButtonOfA reset-btn" type="reset">清除</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>部门列表</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="box-body">
            <div class="add-box clearfix">
              <button  class="btn add-tit" data-toggle="modal" data-target="#addModal" (click)="add()">新增</button>
            </div>
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
                <th>部门名</th>
                <th>部门地址</th>
                <th>部门描述</th>
                <th>部门状态</th>
                <th>部门图标</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let department of list">
                <td>{{department.departmentName}}</td>
                <td>{{department.departmentUrl}}</td>
                <td>{{department.departmentDesc}}</td>
                <td>
                  <span *ngIf="department.departmentStatus=='0'">启用</span>
                  <span *ngIf="department.departmentStatus=='1'">停用</span>
                </td>
                <td>{{department.departmentIcon}}</td>
                <td>
                  <span>
                    <img src="assets/icon/see.png" alt="查看">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(department)">查看</a>
                  </span>
                  <span>
                     <img src="assets/icon/edit.png" alt="编辑">
                      <a href="#" data-toggle="modal" data-target="#updateModal" (click)="userMessage(department)">编辑</a>
                  </span>
                  <span>
                     <img src="assets/icon/delete.png" alt="删除">
                      <a href="#" data-toggle="modal" data-target="#deleteModal" (click)="userMessage(department)">删除</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <page [pageParams]="{pageSize:pageSize,totalNum:totalNum,curPage:curPage,totalPage:totalPage}" (changeCurPage)="getPageData($event)"></page>
      </div>
    </div>
  </section>

  <!-- userMessage -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">部门详情</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>部门名：</td>
                  <td>{{queryMessage.departmentName}}</td>
                </tr>
                <tr>
                  <td>部门地址：</td>
                  <td>{{queryMessage.departmentUrl}}</td>
                </tr>
                <tr>
                  <td>部门描述：</td>
                  <td>{{queryMessage.departmentDesc}}</td>
                </tr>
                <tr>
                  <td>部门状态：</td>
                  <td>
                    <span *ngIf="queryMessage.departmentStatus=='0'">启用</span>
                    <span *ngIf="queryMessage.departmentStatus=='1'">停用</span>
                  </td>
                </tr>
                <tr>
                  <td>部门图标：</td>
                  <td>{{queryMessage.departmentIcon}}</td>
                </tr>
                <tr>
                  <td>部门排序：</td>
                  <td>{{queryMessage.departmentOrder}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group search-list-btn">
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- add -->
  <form #addDepartment="ngForm" (ngSubmit)="addMessage(addDepartment.value,addDepartment.valid)">
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addModalLabel">新增部门</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td><span class="red">*</span>部门名：</td>
                  <td><input [(ngModel)]="addMessages.departmentName" type="text" class="form-control" name="departmentName" required ></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门地址：</td>
                  <td><input [(ngModel)]="addMessages.departmentUrl" type="text" class="form-control" name="departmentUrl" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门描述：</td>
                  <td><input [(ngModel)]="addMessages.departmentDesc" type="text" class="form-control" name="departmentDesc" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门状态：</td>
                  <td>
                    <select [(ngModel)]="addMessages.departmentStatus" class="form-control selectStyle" name="departmentStatus" required>
                      <option value="0">启用</option>
                      <option value="1">停用</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门图标：</td>
                  <td><input [(ngModel)]="addMessages.departmentIcon" type="text" class="form-control" name="departmentIcon" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门排序：</td>
                  <td><input [(ngModel)]="addMessages.departmentOrder" type="number" class="form-control" name="departmentOrder" required></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn sumbit-btn" type="submit" [disabled]="!addDepartment.form.valid">提交</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- update -->
  <form #department="ngForm" (ngSubmit)="updateMessage(department.value,department.valid)">
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="updateModalLabel">编辑部门</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <input type="text" [(ngModel)]="updateMessages.departmentId" class="form-control hidden" name="departmentId" value="{{updateMessages.departmentId}}" >
                <tr>
                  <td><span class="red">*</span>部门名：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.departmentName" class="form-control" name="departmentName" value="{{updateMessages.departmentName}}" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门地址：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.departmentUrl" class="form-control" name="departmentUrl" value="{{updateMessages.departmentUrl}}" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门描述：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.departmentDesc" class="form-control" name="departmentDesc" value="{{updateMessages.departmentDesc}}" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门状态：</td>
                  <td>
                    <select class="form-control selectStyle" [(ngModel)]="updateMessages.departmentStatus" name="departmentStatus" required>
                      <option value="0">启用</option>
                      <option value="1">停用</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门图标：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.departmentIcon" class="form-control" name="departmentIcon" value="{{updateMessages.departmentIcon}}" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>部门排序：</td>
                  <td><input type="number" [(ngModel)]="updateMessages.departmentOrder" class="form-control" name="departmentOrder" value="{{updateMessages.departmentOrder}}" required></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button  class="btn sumbit-btn" type="submit" [disabled]="!department.form.valid">提交</button>
          <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- delete -->
  <div class="modal fade deleteModal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="deleteModalLabel">删除部门</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>是否删除该部门？</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn" data-name="{{queryMessage.departmentId}}"  (click)="deleteById($event)">确定</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade deleteModal" id="error" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="errorMessage">错误信息</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>{{errorMessage}}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer2 text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn"  data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>


